<template>
  <div class="wrap">
  		<div class="app-header"><header-v></header-v></div>
  		
  		<div class="app-content">
  			<div class="new-content">
  				<div class="titles">
  					<a href="javascript:;" class="title" @click="shake">展会资讯</a>
  				</div>
  				<div class="tab" v-for="item in tab">
  					<a href="javascript:;" :class="{active : active}" @click="TabSwitch" :title="item.title">{{ item.title }}</a>
  					<a href="javascript:;" :class="{active : active2}" @click="TabSwitch" :title="item.title2">{{ item.title2 }}</a>
  				</div>
  				<div class="con">
					<transition :name="transitionName">
  					<div class="new1 newList" v-if="active">
  						<panel :list="news_1" :type="type" :footer="footer"></panel>
  					</div>
  				</transition>
  				<transition :name="transitionName">
  					<div class="new2 newList" v-if="active2">
  						<panel :list="news_2" :type="type" :footer="footer"></panel>
  					</div>
  				</transition>
  				</div>
  			</div>
  		</div>
  		
  		<div class="app-footer"><footer-v></footer-v></div>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { Panel } from 'vux'

import src_1 from '../../assets/news_1.jpg'
import src_2 from '../../assets/news_2.jpg'
import src_3 from '../../assets/news_3.jpg'
import src_4 from '../../assets/news_4.png'
import src_5 from '../../assets/news_5.png'
import src_6 from '../../assets/news_6.jpg'
import src_7 from '../../assets/news_7.png'
import src_8 from '../../assets/news_8.jpg'
import src_9 from '../../assets/news_9.jpg'
import src_10 from '../../assets/news_10.jpg'
import src_11 from '../../assets/news_11.jpg'
import src_12 from '../../assets/news_12.jpg'
import src_13 from '../../assets/news_13.jpg'
import src_14 from '../../assets/news_14.jpg'
import src_15 from '../../assets/news_15.jpg'
import src_16 from '../../assets/news_16.jpg'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	Panel
  },
  data () {
    return {
    	active : true,
    	active2 : false,
      transitionName: 'vux-pop-in',
    	tab : [
    		{
    			title : '展会资讯',
    			title2 : '行业资讯'
    		}
    	],
    	type : '1',
    	news_1 : [
    		{
    			title : '精心会展，沟通无限—2017上海国际葡萄酒展向世界展示别样精彩',
    			desc : '2017-05-12  阅读: 725',
    			src : src_1,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '天蕴绿色精华,畅享有机生活--2017中国有机展(上海)',
    			desc : '2017-05-15  阅读: 488',
    			src : src_2,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '2016上海有机食品展览会即将开幕',
    			desc : '2016-11-07  阅读: 764',
    			src : src_3,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '怎样看懂包装袋上的食品安全标志？',
    			desc : '2016-11-07  阅读: 553',
    			src : src_4,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '专注有机 宜品欧能多恭贺有机食品市场超800亿',
    			desc : '2016-11-07  阅读: 299',
    			src : src_5,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},    	
    		{
    			title : '为何参展12月上海绿色有机食品展？',
    			desc : '2016-10-27  阅读: 884',
    			src : src_6,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '2016第十二届上海绿色有机食品交易会开幕进入倒计时',
    			desc : '2016-10-26  阅读: 1416',
    			src : src_7,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},    
    		{
    			title : '“上海绿博会天然展区”将于2016年展会现场首度亮相',
    			desc : '2016-10-26  阅读: 669',
    			src : src_8,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		}
    	],
    	footer: {
        title: '查看更多',
        url: ''
    	},
    	news_2 : [
    		{	
    			title : '直接捞让有机农业更有机会',
    			desc : '2016-10-26  阅读: 465',
    			src : src_9,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '海参质量受关注 有机食品认证保品质',
    			desc : '2016-10-26  阅读: 213',
    			src : src_10,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '有机棉有机护肤品大行其道，有机食品公司不高兴了',
    			desc : '2016-10-26  阅读: 429',
    			src : src_11,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '乐博维：从实例看有机食品的好处',
    			desc : '2016-10-22  阅读: 909',
    			src : src_12,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : 'Holle有机食品，让熟悉的味道回归',
    			desc : '2016-10-22  阅读: 610',
    			src : src_13,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '世界上最大种子 一个重20多斤',
    			desc : '2016-10-15  阅读: 779',
    			src : src_14,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '2017年粮食进口关税配额公布：玉米720万吨',
    			desc : '2016-10-15  阅读: 544',
    			src : src_15,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		},
    		{
    			title : '一个二维码弄慌了种业圈 这些问题你不够了解',
    			desc : '2016-10-15  阅读: 999',
    			src : src_16,
    			url: {
    				path:'/news_Msg',
    				query:{
    					id:123
    				}
    			}
    		}
    	]
    }
  },
  methods : {
  	TabSwitch (ev){
  		if(ev.target.title=='展会资讯'){
  			this.active = true,
  			this.active2 = false
  		}else{
  			this.active = false,
  			this.active2 = true
  		}
  	},
  	shake (ev){
  		ev.target.classList.add('shake');
			setTimeout(function (){
				ev.target.classList.remove('shake');
			},950)
  	}
  }
}

</script>

<style type="text/css">
	/* news.style */
	.new-content .title{
		width:1rem; height: 0.4rem; margin: 0 auto; display: block; border: 0.02rem solid #3d9be9; color: #3d9be9; border-radius: 0.05rem; font-size: 0.2rem; text-align: center; line-height: 0.4rem; padding: 0 0.02rem; background:#fff; 
	}
	.new-content .titles{
		text-align: center; padding: 0.15rem 0;
	}
	.new-content .tab a{
		color: #888; font-size: 0.14rem; line-height: 0.45rem; padding-left: 0.15rem;
	}
	.new-content .tab .active{
		color: #39a9e8 !important;
	}
	.new-content .con {
		width: 100%; text-align: center; height: 8.18rem;
	}
	.new-content .con .big{
		color: #333; line-height: 0.4rem;
	}
	
	.new-content .shake {
		-webkit-animation: shake 900ms linear; animation: shake 900ms linear;
	}
	
	.new-content .new1{
		width:100%; overflow: hidden;
	}
	.new-content .con li{
		padding:0.08rem; border-bottom:0.01rem solid #efefef ;
	}
 	.new-content .con a{
 		text-align: left !important; color: #666; 
 	}
 	.new-content  .con .weui-media-box__desc{
 		 line-height: 0.25rem; display: block; padding-left: 0.2rem; color: #808080; -webkit-line-clamp:inherit; font-size: 0.12rem; 
 	}
	.new-content .con .weui-media-box__title{
		margin-left: 0.2rem; font-size: 0.15rem; white-space:normal; line-height: 0.2rem; height: 0.4rem; overflow: hidden;
	}
	.new-content .weui-media-box{
		border-top: 0.01rem solid #dcdcdc;
	}
 	.new-content .con .weui-media-box__hd img{
 		width: 0.8rem; height: 0.52rem;
	}
	.new-content .weui-cell__bd{
		text-align: center; line-height: 0.3rem; width:100%;
	}
	.weui-media-box_appmsg .weui-media-box__hd{
		width: 0.6rem !important; height: 0.6rem !important;
	}
	
</style>